<template>
  <div class="wrap">
    <div class="wrap-mask">
      <div class="login">
        <h1 style="color:black" class="login-title">登录</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" :hide-required-asterisk='false'
          size='medium'>
          <el-form-item prop="name">
            <span slot="label" style="font-size:20px;color:black">姓名</span>
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <span slot="label" style="font-size:20px;color:black">密码</span>
            <el-input v-model="ruleForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item prop="is_admin">
            <span slot="label" style="font-size:20px;color:black">管理员登录</span>
            <el-switch v-model="ruleForm.is_admin"></el-switch>
          </el-form-item>
        </el-form>
        <el-button type="submit" @click="submitForm('ruleForm')"
          style="color:white;background-color:rgb(102,177,255);font-size:15px" icon="el-icon-finished">登录</el-button>
        <el-button @click="resetForm('ruleForm')" style="margin:0 5px">重置</el-button>
        <router-link to="/">
          <el-button>取消</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
        is_admin: false
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
            message: "请勿输入特殊字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
            message:
              "最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      //console.log($GLOBAL.is_login);
      this.$axios
        .post(this.$GLOBAL.localHost + "login/", {
          username: this.ruleForm.name,
          password: this.ruleForm.password
        })
        .then(res => {
          console.log(res);
          if (res.data.success == 1) {
            this.$GLOBAL.is_login = true;
            this.$GLOBAL.username = this.ruleForm.name;
            if (this.ruleForm.is_admin == 1) {
              this.$GLOBAL.is_admin = true;
              this.$notify({
                title: "管理员登录",
                message: "欢迎您，管理员" + this.$GLOBAL.username,
                type: "success"
              });
              this.$router.replace("/Admin");
            } else {
              this.$notify({
                title: "用户登录",
                message: "欢迎您，尊敬的用户" + this.$GLOBAL.username,
                type: "success"
              });
              this.$router.replace("/");
            }
          } else {
            this.$message.error('登录失败,请检查用户名或密码');
            return false;
          }
        })
        .catch(error => {
          console.log(error)
          this.$message.error('服务器异常');
        })
      /*
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('登陆成功');
            this.$router.replace('/');
          } else {
            console.log('error submit!!');
            return false;
          }
        });*/
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.login {
  position: absolute;
  width: 35%;
  display: block;
  height: 500px;
  background-color: rgb(253, 253, 253);
  /*background-color: #d7e3f0;*/
  border: silver 1px solid;
  box-shadow: 0 0 -5px -5px rgba(0, 0, 0, 0.2);
  padding: 0 100px;
  padding-top: 50px;
  padding-bottom: 30px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  opacity: 0.9;
}
.login .login-title {
  margin-top: -20px;
  margin-bottom: 40px;
}
.wrap {
  position: relative;
  width: 1920px;
  height: 100%;
  background-image: url("https://th.bing.com/th/id/Rce9fdda39896c93ce6977c80ea1440f2?rik=ppHPH0paZHD0xA&riu=http%3a%2f%2fwww.ztkm.com%2fuploads%2fallimg%2f120422%2f2012042310356082457.jpg&ehk=sSBWlmhwWMwO%2f1YJvnoFD3S9hyh0qSi%2f3aSqXSF9v5I%3d&risl=&pid=ImgRaw");
  background-repeat: no-repeat;
  background-size: cover;
}
.wrap-mask:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: silver;
  opacity: 0.5;
  z-index: 50;
  width: 100%;
  height: 100%;
}
</style>